<!--
 * @Author: Haochen
 * @Date: 2021-12-08 20:58:52
 * @LastEditTime: 2021-12-09 21:41:32
 * @FilePath: \students-system\src\views\classes\DeleteClass.vue
-->
<template>
  <div>
    <h4>删除班级</h4>
    <select v-model="subjectsId">
      <option :value="undefined" disabled>请选择专业</option>
      <option
        v-for="subject in subjects"
        :key="subject._id"
        :value="subject._id"
      >
        {{ subject.name }}
      </option>
    </select>
    &nbsp;
    <select v-model="classesId">
      <option :value="undefined" disabled>请选择班级</option>
      <option v-for="c in classes" :key="c._id" :value="c._id">
        {{ c.name }}
      </option>
    </select>
    &nbsp;
    <button @click="deleteClass">确认删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      subjectsId: undefined,
      classesId: undefined,
      subjects: [],
      classes: [],
    };
  },
  created() {
    this.getAllSubjects();
  },
  methods: {
    async getAllSubjects() {
      const { data: res } = await this.$api.subjects.getSubjects();
      if (res.code) {
        this.subjects = res.data.rows;
      }
    },

    async deleteClass() {
      const { data: res } = await this.$api.classes.deleteClass({
        _id: this.classesId,
      });

      if (res.code) {
        alert(res.message);
        this.classesId = undefined;
      } else {
        alert(res.message);
      }
    },

    async getClassesById() {
      const { data: res } = await this.$api.classes.getClassesBySubId({
        subjectsId: this.subjectsId,
      });

      if (res.code) {
        this.classes = res.data.rows;
      }
    },
  },

  watch: {
    subjectsId() {
      this.getClassesById();
    },
    classesId() {
      console.log(this.classesId);
    },
  },
};
</script>

<style></style>
